<script lang="ts" setup>
interface Props {
  prefix?: string
  name: string
  hasTransition?: boolean
  className?: string
  size?: string
}

defineOptions({
  name: 'BaseIcon',
})

const props = withDefaults(defineProps<Props>(), {
  prefix: 'icon',
  hasTransition: true,
  className: ''
})

const symbolId = computed(() => `${props.prefix}:${props.name}`)
</script>

<template>
  <div class="base-icon" :class="className">
    <Icon :name="symbolId" :class="[hasTransition && 'has-transition', `size-[${size}]`]" />
  </div>
</template>

<style>
:root {
  --tg-base-icon-color: #b3bec1;
}
</style>

<style lang="scss" scoped>
.base-icon {
  color: var(--tg-base-icon-color);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.has-transition {
  transition: all ease 0.25s;
}
</style>
